<%--
  Created by IntelliJ IDEA.
  User: haojianlei
  Date: 2018/11/23
  Time: 11:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> - 结果页-</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico"> <link href="${pageContext.request.contextPath}/assets/shipui/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/shipui/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/shipui/css/animate.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/shipui/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/ship/bootstaptoast/bootaost.css">
    <link href="${pageContext.request.contextPath}/assets/shipui/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <style>
        html,
        body,
        #mapContainer {
            width: 100%;
            height: 100%;
            margin: 0px;
        }

        #loadingTip {
            position: absolute;
            z-index: 9999;
            top: 0;
            right: 0;
            padding: 3px 10px;
            background: red;
            color: #fff;
            font-size: 13px;
        }
        .mapTab{
            position: absolute;
            z-index: 10000;
            right: 60px;
            top: 70px;
            width:200px;
            background-color: #ffffff;
            text-align: center;
            cursor: pointer;
            box-shadow: 0 0 10px #9e9ca6;
        }
        .mapTabShip{
            width:100px;
            float: left;
            padding-bottom: 5px;
            padding-top: 5px;
            border: solid 1px #f0f0f0;
        }
        .mapSearchTab{
            position: absolute;
            z-index: 10000;
            left: 60px;
            top: 40px;
            width: 500px;
        }
        .mapSearchInput{
            position: absolute;
            z-index: 10000;
            left: 60px;
            top: 120px;
            width: 500px;
        }
        .listphones:hover{
            background-color: #F0F0F0;
            cursor: pointer;
        }
        a {
            text-decoration: none;
        }
        a:hover {
            text-decoration: none;
        }
        .tcdPageCode {
            padding: 15px 5px;
            text-align: left;
            color: #ccc;
            text-align: center;
        }
        .tcdPageCode a {
            display: inline-block;
            color: #428bca;
            display: inline-block;
            height: 25px;
            line-height: 25px;
            padding: 0 5px;
            border: 1px solid #ddd;
            margin: 0 2px;
            border-radius: 4px;
            vertical-align: middle;
        }
        .tcdPageCode a:hover {
            text-decoration: none;
            border: 1px solid #428bca;
        }
        .tcdPageCode span.current {
            font-size: 12px;
            display: inline-block;
            height: 25px;
            line-height: 25px;
            padding: 0 5px;
            margin: 0 2px;
            color: #fff;
            background-color: #428bca;
            border: 1px solid #428bca;
            border-radius: 4px;
            vertical-align: middle;
        }
        .tcdPageCode span.disabled {
            font-size: 12px;
            display: inline-block;
            height: 25px;
            line-height: 25px;
            padding: 0 5px;
            margin: 0 2px;
            color: #bfbfbf;
            background: #f2f2f2;
            border: 1px solid #bfbfbf;
            border-radius: 4px;
            vertical-align: middle;
        }
        .tonSearch{
            width: 310px;
            height: 46px;
            background-color: #ffffff;
            /*margin-top: 30px;*/
            line-height: 36px;
            border: solid 1px #f0f0f0;
        }
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight" style="padding: 0;height: 100%">
    <div class="row" style="padding: 0;height: 100%">
        <div class="ibox float-e-margins" style="padding: 0;height: 100%">
            <div class="ibox-content" style="padding: 0;height: 100%">
                <div id="mapContainer"></div>
                <div>
                    <div class="mapTab">
                        <div id="c1" class="mapTabShip" onclick="adjective()">全部运力</div>
                        <div id="c2" class="mapTabShip" onclick="idiom()">自有运力</div>
                    </div>
                </div>
                <div>
                    <div class="mapSearchTab">
                        <div>
                            <span onclick="zhao1()" style="background: #1890ff;color:#fff;padding: 10px;cursor: pointer;border:1px solid #e0e0e0;border-radius: 3px;border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;margin-left: 5px" id="zhao11">船名找船</span>
                            <span onclick="zhao2()" style="background: #ffffff;padding: 10px;margin-left: 10px;cursor: pointer;border:1px solid #e0e0e0;border-radius: 3px;border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;margin-left: 5px" id="zhao12">筛选找船</span></div>
                        <div id="a1" style="display: block">
                            <input id="zhaochuang" class="form-control"  placeholder="请输入船名" style="width: 300px;height: 36px; float: left;z-index:10001;margin-top: 8px"/>
                            <button onclick="zhaoChuang()" class="btn btn-primary" style="margin-top: 8px;border-top-left-radius:0 ;border-bottom-left-radius:0">搜索船舶</button>
                        </div>
                        <div id="a2" style="display: none">
                            <input id="zhaochuangs" onchange="zuanze3()" class="form-control" style="width: 300px;height: 36px; float: left;z-index:10001;margin-top: 8px;" placeholder="请输入要查询的地名"/>
                            <div onclick="zhaoChuang1(1)"  class="btn btn-primary" style="margin-top: 8px;border-top-left-radius:0 ;border-bottom-left-radius:0;line-height:2;">查询船舶</div>
                            <%--<div style="width: 365px;background: #FFFFFF;">--%>
                            <%--<div style="position: absolute;z-index: 10000;left: 0px;top: 38px; width: 500px">--%>
                            <div class="tonSearch">
                                <span style="background-color: #f0f0f0;/* margin-left: 10px; */padding: 10px;">吨位区间</span>
                                <input id = 'dunwei1' onchange="zuanze1()"  style="outline:none;width: 74px;border-left: 0px;border-right: 0px;border-bottom: solid 1px #999;border-top: 0px;height: 22px; "/>
                                至
                                <input  id = 'dunwei2' onchange="zuanze2()"  style="outline:none;width: 80px;border-left: 0px;border-right: 0px;border-bottom: solid 1px #999;border-top: 0px;height: 22px;"/>
                                <span onclick="zhaoChuang1(2)"  class="btn btn-primary" style="margin-top: 4px;border-top-left-radius:0 ;border-bottom-left-radius:0;line-height:2;">查询</span>
                            </div>
                            <div
                                    style="width: 65px;
                                height: 39px;
                                text-align: center;
                                line-height: 39px;
                                font-size: 16px;
                                background-color: #1890ff;
                                color: #ffffff;
                                border-radius: 3px;
                               position: absolute;
                               left: 314px;
                               top: 71px;
                               cursor: pointer;
                                display: none"
                                    onclick="closes1()"
                                    id="chongzhi"
                            >重置</div>
                            <%--</div>--%>
                            <%--</div>--%>
                        </div>


                        <div id="zhaoc" style="width: 300px;background: #ffffff;height: 400px;margin-top: 16px;display: none;border: solid 1px #F0F0F0;box-shadow: 0 0 10px">
                            <%--<div style="margin-left: 20px;color:#00a0f0;padding-top: 10px;padding-bottom: 10px;">--%>
                            <%--<span >船舶档案</span>--%>
                            <%--</div>--%>
                            <%--<div style="margin-left: 20px">--%>
                            <%--<div style="padding-top: 15px;">船名：</div>--%>
                            <%--<div style="padding-top: 15px;">船主：</div>--%>
                            <%--<div style="padding-top: 15px;">电话：</div>--%>
                            <%--<div style="padding-top: 15px;">载货量：</div>--%>
                            <%--<div style="padding-top: 15px;">参数：</div>--%>
                            <%--</div>--%>
                            <%--<div style="margin-left: 20px">--%>
                            <%--<div style="padding-top: 15px;">经度：</div>--%>
                            <%--<div style="padding-top: 15px;">纬度：</div>--%>
                            <%--<div style="padding-top: 15px;">航迹向：</div>--%>
                            <%--<div style="padding-top: 15px;">航行状态：</div>--%>
                            <%--<div style="padding-top: 15px;">目的地：</div>--%>
                            <%--<div style="padding-top: 15px;">预计到港时间：</div>--%>
                            <%--<div style="padding-top: 15px;">数据更新时间：</div>--%>
                            <%--</div>--%>
                        </div>
                        <%--区域找船--%>

                        <div id="zhao-center" style="width: 364px;background-color: #ffffff;color: #0C0C0C;height:550px;margin-top: 15px;display: none;box-shadow: 0 0 10px #9e9ca6;border: solid 1px #F0F0F0;">
                        </div>
                        <div id="zhao-curr" style="width:50% ;margin: 0 auto;display: none">
                            <div style="float: left;position: absolute;bottom: 0px;left: 0;" class="tcdPageCode"></div>
                            <div style="clear: both"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 全局js -->
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="${pageContext.request.contextPath}/assets/shipui/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${pageContext.request.contextPath}/assets/ship/bootstaptoast/bootoast.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.10&key=30556745e1796cbe4f69a621a8bc58bf&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script src="${pageContext.request.contextPath}/assets/shipui/js/jquery.page.js"></script>
<!-- 自定义js -->
<script src="${pageContext.request.contextPath}/assets/shipui/js/content.js?v=1.0.0"></script>
<script src="${pageContext.request.contextPath}/assets/shipui/js/plugins/sweetalert/sweetalert.min.js"></script>

<script>
    var colors = [
        "#0096ff"
    ];
    var  nort1='';
    var  nort2='';
    var  nort3='';
    var  nort4='';
    var  isflag1 = true;
    var  geocoder
    var map1 ;
    var curr = 1;
    var page = 6
    var isFlag = true;
    var shipId = "";
    var iszhao = false;
    var ww = 2;
    var auto;
    var placeSearch;
    var autoOptions;
    var map = new AMap.Map('mapContainer', {
        resizeEnable: true,
        showIndoorMap: false,
        features: ['bg','point']
    });

    adjective();
    logMapBounds()
    function logMapBounds() {

        var bounds = map.getBounds();
        nort1 =  bounds.northeast.toString();    //东北
        nort2 =  bounds.southwest.toString();    //西南
        nort3 = bounds.northeast.toString().split(',')[0]+','+ bounds.southwest.toString().split(',')[1]  ;    //东南
        nort4 =  bounds.southwest.toString().split(',')[0]  +','+ bounds.northeast.toString().split(',')[1];    //西北
        // console.log(bounds)
    }
    function logMapBounds12() {

        var bounds = map1.getBounds();
        nort11 =  bounds.northeast.toString();    //东北
        nort12 =  bounds.southwest.toString();    //西南
        nort3 = bounds.northeast.toString().split(',')[0]+','+ bounds.southwest.toString().split(',')[1]  ;    //东南
        nort4 =  bounds.southwest.toString().split(',')[0]  +','+ bounds.northeast.toString().split(',')[1];    //西北/西北
    }
    //绑定地图移动与缩放事件

    function logMapSeach(){
        logMapBounds();
        init()
    }

    // map.on('moveend', logMapSeach);
    // map.on('zoomend', logMapSeach);
    function seachs(){
        var geocoder = new AMap.Geocoder({
            city: "南京", //城市设为北京，默认：“全国”
        });
        var address = document.getElementById('zhaochuang').value;
        geocoder.getLocation(address, function(status, result) {
            if (status === 'complete' && result.geocodes.length) {
                var lnglat = result.geocodes[0].location
                // console.log(lnglat)
                if (!marker) {
                    marker = new AMap.Marker();
                    map.add(marker);
                }
                marker.setPosition(lnglat);
                map.setFitView(marker);
            }
        })
    }

    function zuanze1(){
        // alert(1)
        document.getElementById('chongzhi').style.display = 'block'

    }
    function zuanze2(){
        // alert(1)
        document.getElementById('chongzhi').style.display = 'block'

    }
    function zuanze3(){
        // alert(1)
        document.getElementById('chongzhi').style.display = 'block'
    }
    function zhao1(){
        ww = 1;
        document.getElementById('chongzhi').style.display = 'none'
        document.getElementById('zhaochuangs').value = '';
        document.getElementById('dunwei1').value = '';
        document.getElementById('dunwei2').value = '';
        document.getElementById('zhao-curr').style.display = 'none'
        document.getElementById('a1').style.display = 'block';
        document.getElementById('a2').style.display = 'none';
        document.getElementById('zhaoc').style.display = 'none'
        document.getElementById('zhao-center').style.display = 'none'
        document.getElementById('zhao11').style.backgroundColor = '#0e9aef'
        document.getElementById('zhao12').style.backgroundColor = '#ffffff'
        document.getElementById('zhao11').style.color = '#ffffff'
        document.getElementById('zhao12').style.color = '#000000'
    }
    function zhao2(){
        ww = 2;
        document.getElementById('chongzhi').style.display = 'none'
        document.getElementById('zhaochuangs').value = '';
        document.getElementById('dunwei1').value = '';
        document.getElementById('dunwei2').value = '';
        document.getElementById('zhao-curr').style.display = 'none'
        document.getElementById('a2').style.display = 'block';
        document.getElementById('a1').style.display = 'none';
        document.getElementById('zhaoc').style.display = 'none'
        document.getElementById('zhao-center').style.display = 'none'
        document.getElementById('zhao11').style.backgroundColor = '#ffffff'
        document.getElementById('zhao12').style.backgroundColor = '#0e9aef'
        document.getElementById('zhao12').style.color = '#ffffff'
        document.getElementById('zhao11').style.color = '#000000'
    }
    function showInfoM1(e) {
        // console.log(e)//content: "鲁济宁货6372"
        document.getElementById('zhao-curr').style.display = 'none'
        var html = '';
        var id = e.target.Ke.extData.content.split('&&')[7]
        html+='<div  style="margin-left: 20px;color:#00a0f0;padding-top: 10px;padding-bottom: 10px;">'
            +' <span >船舶档案</span> <span onclick="closes()" style="margin-left: 200px;font-size: 12px; cursor: pointer;">X</span> '
            +'</div>'
            +'<div style="margin-left: 20px">\n' +
            ' <div style="padding-top: 15px;">船名：'+e.target.Ke.extData.content.split('&&')[0]+'</div>\n' +
            ' <div style="padding-top: 15px;">电话：<span id="phonesq"  style="padding: 5px; color: #000000;display: none"></span><span style="padding: 5px; background-color: #0e9aef;cursor: pointer;color: #ffffff;" id="phones" onclick="phoneList(1,'+id+')">立即联系</span>\n' +
            '<div style="padding-top: 15px;">载货量：'+e.target.Ke.extData.content.split('&&')[1]+'</div>\n' +
            '</div>\n' +
            '<div style="margin-left:0px">\n' +
            '<div style="padding-top: 15px;">航迹向：'+e.target.Ke.extData.content.split('&&')[2]+'</div>\n' +
            '<div style="padding-top: 15px;">航行状态：'+e.target.Ke.extData.content.split('&&')[3]+'</div>\n' +
            '<div style="padding-top: 15px;">目的地：'+e.target.Ke.extData.content.split('&&')[4]+'</div>\n' +
            '<div style="padding-top: 15px;">预计到港时间：'+e.target.Ke.extData.content.split('&&')[5]+'</div>\n' +
            '<div style="padding-top: 15px;">数据更新时间：'+e.target.Ke.extData.content.split('&&')[6]+'</div>\n' +
            '</div>'
        document.getElementById('zhaoc').style.display = 'block'
        document.getElementById('zhao-center').style.display = 'none'
        document.getElementById('zhaoc').style.marginTop =  '16px';

        $('#zhaoc').html(html)
        if(!isFlag){
            phoneList(1,id)
        }
    }
    function zhaoChuang1(index){
        isflag1=false;
        var dataList = '';
        var html = '';
        var d1 = document.getElementById('dunwei1').value
        var d2 = document.getElementById('dunwei2').value
        // console.log(d1 && d2)
        if(d1 && d2){
            var d3 = d1+"-"+d2

        }
        if(!map1){
            map1 = new AMap.Map('mapContainer', {
                resizeEnable: true,
                zoom: 9,
                showIndoorMap: false,
                features: ['bg', 'point']
            });
        }
        var bounds = map1.getBounds();
        nort1 =  bounds.northeast.toString();    //东北
        nort2 =  bounds.southwest.toString();    //西南
        nort3 = bounds.northeast.toString().split(',')[0]+','+ bounds.southwest.toString().split(',')[1]  ;    //东南
        nort4 =  bounds.southwest.toString().split(',')[0]  +','+ bounds.northeast.toString().split(',')[1];    //西北  //西北
        var chuFaDi = nort4.split(',')[0]+','+nort4.split(',')[1]+'-'+nort1.split(',')[0]+','+nort1.split(',')[1]+'-'+nort3.split(',')[0]+','+nort3.split(',')[1]+'-'+nort2.split(',')[0]+','+nort2.split(',')[1]
        // console.log(chuFaDi)

        if(isFlag){
            var isZY = ''
        }else {
            var isZY = 'Y'
        }
        $.ajax({
            type:'post',
            url:"ship/queryShipByLat.do",
            data:JSON.stringify({
                "dunWei":d3,
                'chuFaDi' : chuFaDi,
                "isZY":isZY
            }),
            success:function(data){
                if(!data.SUCCESS || data.shipList.length == 0){
                    swal({
                        title: "该区域无船舶信息",
                        type: "warning"
                    });
                    return
                }else{
                    dataList = data;
                    document.getElementById('zhaoc').style.display = 'none'
                    document.getElementById('zhao-center').style.display = 'block'

                }
                $('.amap-marker').css('display','none');
                for(var i =0;i<data.shipList.length; i++){
                    if(!data.shipList[i].lon || !data.shipList[i].lat){
                    }else {
                        var zoom = map.getZoom()
                        marker = new AMap.Marker({
                            icon: "http://huizhaochuan.oss-cn-shanghai.aliyuncs.com/hzclogo8.png?x-oss-process=image/resize,p_70",
                            position: [data.shipList[i].lon, data.shipList[i].lat],
                            extData: {content: data.shipList[i].shipName + '&&' + data.shipList[i].tonnage + '&&' + data.shipList[i].hdg + '&&' + data.shipList[i].shipState + '&&' + data.shipList[i].dest + '&&' + data.shipList[i].etaStd + '&&' + data.shipList[i].lastTime + '&&' + data.shipList[i].shipId},
                            title: data.shipList[i].shipName
                        });
                        marker.setAngle(20 + i)
                        marker.on('click', showInfoM1);
                        //判断地图等级
                        map1.add(marker);
                        // map.add(marker)
                    }
                    if (i<6) {
                        html += '<div class="listphones"  onclick="zhaoChuang(\''+data.shipList[i].shipName+'\')"> <div  style="padding-bottom: 15px;padding-top: 15px;overflow: hidden">\n' +
                            '<div style="width: 130px;float: left;margin-left: 15px;">'+data.shipList[i].shipName+'</div>\n' +
                            '<div style="width: 60px;float: left;margin-left: 15px;">'+data.shipList[i].tonnage+'</div>\n' +
                            '<div style="width: 130px;float: left;text-align: center">'+data.shipList[i].shipState+'</div>\n' +
                            '</div>\n' +
                            // '<div id="phonesq2"  style="width: 100px;text-align: center;margin-left: 190px;height: 30px;line-height: 30px; color: #ffffff;">' +'</div>'+   onclick="phoneList(2,'+data.shipList[i].shipId+')"
                            '<div id="phones2"  style="width: 100px;text-align: center;margin-left: 249px;height: 30px;line-height: 30px; background: #0e9aef;color: #ffffff;">\n' +
                            '立即联系\n' +
                            '</div></div>';
                    }

                    // map.remove(marker)
                }

                $("#zhao-center").html(html)
                document.getElementById('zhao-curr').style.display = 'block'
                var tiaoshu=dataList.shipList.length;//数据的条数
                var yexian=page;//每页几条数据
                var ye=  Math.ceil(tiaoshu/yexian);//可以分为几页
                var currentUrl01 = decodeURI(window.location.href);
                var arr01 = currentUrl01.split("?");
                $('#zongye').text(ye);
                $('#dang').html(arr01[1]);
                $(function () {
                    $('#tiao').val(arr01[1]);
                    setTimeout(function () {
                        $("#zhuan").click()
                    },10);
                });
                function bian(yeshu){
                    var stateObject = {};
                    var title = "";
                    var newUrl ="" ;
                    if(arr01[0]!=parseInt($('#dang').text())){
                        newUrl =arr01[0]+"?"+yeshu;
                        history.pushState(stateObject,title,newUrl);
                    }
                }
                ////////////////////////////////这里面获取数据  p 为当前页数
                $(".tcdPageCode").createPage({
                    pageCount:ye,
                    current:1,
                    backFn:function(p){
                        if(!dataList.SUCCESS || dataList.shipList.length == 0){
                            swal({
                                title: "该区域无船舶信息",
                                type: "warning"
                            });
                            return
                        }else{
                            document.getElementById('zhaoc').style.display = 'none'
                            document.getElementById('zhao-center').style.display = 'block'
                        }
                        html = ''
                        // console.log(dataList.shipList.length)

                        for(var i =0;i<dataList.shipList.length; i++){
                            if(!dataList.shipList[i].lon || !dataList.shipList[i].lat){
                                return
                            }
                            marker = new AMap.Marker({
                                icon: "http://huizhaochuan.oss-cn-shanghai.aliyuncs.com/hzclogo8.png?x-oss-process=image/resize,p_70",
                                position: [dataList.shipList[i].lon,dataList.shipList[i].lat],
                                extData:{content:dataList.shipList[i].shipName+'&&'+dataList.shipList[i].tonnage+'&&'+dataList.shipList[i].hdg+'&&'+dataList.shipList[i].shipState+'&&'+dataList.shipList[i].dest+'&&'+dataList.shipList[i].etaStd+'&&'+dataList.shipList[i].lastTime+'&&'+dataList.shipList[i].shipId},
                                title:dataList.shipList[i].shipName
                            });
                            marker.setAngle(20+i)
                            marker.on('click', showInfoM1);
                            //判断地图等级
                            map1.add(marker);
                            if (i>=p*6-6 && i<6*p) {
                                html += '<div class="listphones"  onclick="zhaoChuang(\''+dataList.shipList[i].shipName+'\')"> <div  style="padding-bottom: 15px;padding-top: 15px;overflow: hidden">\n' +
                                    '<div style="width: 130px;float: left;margin-left: 15px;">'+dataList.shipList[i].shipName+'</div>\n' +
                                    '<div style="width: 60px;float: left;margin-left: 15px;">'+dataList.shipList[i].tonnage+'</div>\n' +
                                    '<div style="width: 130px;float: left;text-align: center">'+dataList.shipList[i].shipState+'</div>\n' +
                                    '</div>\n' +
                                    // '<div id="phonesq2"  style="width: 100px;text-align: center;margin-left: 190px;height: 30px;line-height: 30px; color: #ffffff;">' +'</div>'+
                                    '<div id="phones2" onclick="phoneList(2,'+dataList.shipList[i].shipId+')" style="width: 100px;text-align: center;margin-left: 249px;height: 30px;line-height: 30px; background: #0e9aef;color: #ffffff;">\n' +
                                    '立即联系\n' +
                                    '</div></div>';
                            }else{
                                if(i>6*p){
                                    $("#zhao-center").html(html);
                                    return;
                                }
                            }
                            // map.remove(marker)
                        }
//                                console.log(html)



                        bian(p);
                    }
                });
            }})
    }

    function init(){
        var map = new AMap.Map('mapContainer', {
            resizeEnable: true,
            zoom: 7,
            center: [118.796623,32.059352],
            showIndoorMap: false,
            features: ['bg','point']
        });
        if(!autoOptions) {
            autoOptions = {
                input: "zhaochuangs"
            };
            auto = new AMap.Autocomplete(autoOptions);
            placeSearch = new AMap.PlaceSearch({
                map: map
            });  //构造地点查询类
            AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
            function select(e) {
                isflag1 = false;
                iszhao = false;
                if(!map1){
                    map1 = new AMap.Map('mapContainer', {
                        resizeEnable: true,
                        zoom: 9,
                        showIndoorMap: false,
                        features: ['bg','point']
                    });

                    placeSearch = new AMap.PlaceSearch({
                        map: map1
                    });
                    AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发

                }

                placeSearch.setCity(e.poi.adcode);
                placeSearch.search(e.poi.name);  //关键字查询查询
                setTimeout(zhaoChuang1,2000)

                // AMapUI.load(['ui/misc/PointSimplifier', 'lib/$'], function(PointSimplifier, $) {
                //     if (!PointSimplifier.supportCanvas) {
                //         alert('当前环境不支持 Canvas！');
                //         return;
                //     }
                //     if(isflag1){
                //         var pointSimplifierIns = new PointSimplifier({
                //             zIndex: 115,
                //             autoSetFitView: false,
                //             map: map, //所属的地图实例
                //
                //             getPosition: function(item) {
                //                 if (!item) {
                //                     return null;
                //                 }
                //                 var parts = item.split(',');
                //                 return [parseFloat(parts[0]), parseFloat(parts[1])];
                //             },
                //             getHoverTitle: function(dataItem, idx) {
                //                 return ;
                //             },
                //             //使用GroupStyleRender
                //             renderConstructor: PointSimplifier.Render.Canvas.GroupStyleRender,
                //             renderOptions: {
                //                 //点的样式
                //                 pointStyle: {
                //                     fillStyle: 'red',
                //                     width: 5,
                //                     height: 5
                //                 },
                //                 getGroupId: function(item, idx) {
                //                     var parts = item.split(',');
                //                     //按纬度区间分组
                //                     return Math.abs(Math.round(parseFloat(parts[1]) / 3));
                //                 },
                //                 groupStyleOptions: function(gid) {
                //                     return {
                //                         pointStyle: {
                //                             fillStyle: colors[gid % colors.length]
                //                         }
                //                     };
                //                 }
                //
                //             }
                //         });
                //     }else{
                //         var pointSimplifierIns = new PointSimplifier({
                //             zIndex: 115,
                //             autoSetFitView: false,
                //             map: map1, //所属的地图实例
                //
                //             getPosition: function(item) {
                //                 if (!item) {
                //                     return null;
                //                 }
                //                 var parts = item.split(',');
                //                 return [parseFloat(parts[0]), parseFloat(parts[1])];
                //             },
                //             getHoverTitle: function(dataItem, idx) {
                //                 return ;
                //             },
                //             //使用GroupStyleRender
                //             renderConstructor: PointSimplifier.Render.Canvas.GroupStyleRender,
                //             renderOptions: {
                //                 //点的样式
                //                 pointStyle: {
                //                     fillStyle: 'red',
                //                     width: 5,
                //                     height: 5
                //                 },
                //                 getGroupId: function(item, idx) {
                //                     var parts = item.split(',');
                //                     //按纬度区间分组
                //                     return Math.abs(Math.round(parseFloat(parts[1]) / 3));
                //                 },
                //                 groupStyleOptions: function(gid) {
                //                     return {
                //                         pointStyle: {
                //                             fillStyle: colors[gid % colors.length]
                //                         }
                //                     };
                //                 }
                //
                //             }
                //         });
                //     }
                //
                //     function startAnim() {
                //         var renderOptions = pointSimplifierIns.getRenderOptions();
                //         //获得pointStyle
                //         var pointStyle = renderOptions.pointStyle;
                //         var size = pointStyle.width,
                //             range = [1, 9],
                //             step = size < range[1] ? 1 : -1;
                //         //pointSimplifierIns.getRender().getLayer().set('alwaysRender', true);
                //         function anim() {
                //             size += step;
                //             //修改pointStyle
                //             pointStyle.width = pointStyle.height = size;
                //             //重新绘制
                //             pointSimplifierIns.render();
                //             if (size >= range[1]) {
                //                 step = -1;
                //             } else if (size <= range[0]) {
                //                 step = 1;
                //             }
                //             //window.requestAnimationFrame(anim);
                //             //
                //             setTimeout(anim, 3000);
                //         }
                //         anim();
                //     }
                //     function showInfoM(e) {
                //         console.log(e)//content: "鲁济宁货6372"
                //         document.getElementById('zhao-curr').style.display = 'none'
                //         var html = '';
                //         var id = e.target.Ke.extData.content.split('&&')[7]
                //         html+='<div style="margin-left: 20px;color:#00a0f0;padding-top: 10px;padding-bottom: 10px;">'
                //             +' <span >船舶档案</span><span onclick="closes()" style="margin-left: 200px;font-size: 12px; cursor: pointer;">X</span>'
                //             +'</div>'
                //             +'<div style="margin-left: 20px">\n' +
                //             ' <div style="padding-top: 15px;">船名：'+e.target.Ke.extData.content.split('&&')[0]+'</div>\n' +
                //             ' <div style="padding-top: 15px;">电话：<span id="phonesq"  style="padding: 5px; color: #000000;display: none"></span> <span style="padding: 5px;cursor: pointer; background-color: #0e9aef;color: #ffffff;" id="phones" onclick="phoneList(1,'+id+')">立即联系</span>\n' +
                //             '<div style="padding-top: 15px;">载货量：'+e.target.Ke.extData.content.split('&&')[1]+'</div>\n' +
                //             '</div>\n' +
                //             '<div style="margin-left: 0px">\n' +
                //             '<div style="padding-top: 15px;">航迹向：'+e.target.Ke.extData.content.split('&&')[2]+'</div>\n' +
                //             '<div style="padding-top: 15px;">航行状态：'+e.target.Ke.extData.content.split('&&')[3]+'</div>\n' +
                //             '<div style="padding-top: 15px;">目的地：'+e.target.Ke.extData.content.split('&&')[4]+'</div>\n' +
                //             '<div style="padding-top: 15px;">预计到港时间：'+e.target.Ke.extData.content.split('&&')[5]+'</div>\n' +
                //             '<div style="padding-top: 15px;">数据更新时间：'+e.target.Ke.extData.content.split('&&')[6]+'</div>\n' +
                //             '</div>'
                //         document.getElementById('zhaoc').style.display = 'block'
                //         document.getElementById('zhao-center').style.display = 'none'
                //         document.getElementById('zhaoc').style.marginTop =  '16px';
                //
                //         $('#zhaoc').html(html)
                //     }
                //     function csvTop(){
                //         if(isflag1){
                //             var bounds = map.getBounds();
                //             nort1 =  bounds.northeast.toString();    //东北
                //             nort2 =  bounds.southwest.toString();    //西南
                //             nort3 =  bounds.southwest.toString().split(',')[1] +','+ bounds.northeast.toString().split(',')[0];    //东南
                //             nort4 =  bounds.northeast.toString().split(',')[1] +','+ bounds.southwest.toString().split(',')[0];    //西北
                //         }else{
                //             var bounds = map1.getBounds();
                //             nort1 =  bounds.northeast.toString();    //东北
                //             nort2 =  bounds.southwest.toString();    //西南
                //             nort3 =  bounds.southwest.toString().split(',')[1] +','+ bounds.northeast.toString().split(',')[0];    //东南
                //             nort4 =  bounds.northeast.toString().split(',')[1] +','+ bounds.southwest.toString().split(',')[0];    //西北
                //         }
                //         var lonlat = [];
                //         var lonlatO = {}
                //         var marker = '';
                //         var lonlatA = [];
                //         $('<div id="loadingTip">加载数据，请稍候...</div>').appendTo(document.body);
                //         console.log(JSON.parse(getStorage('lon')))
                //         if(JSON.parse(getStorage('lon'))){
                //             console.log(1)
                //             if(isflag1){
                //                 var zoom = map.getZoom();
                //             }else{
                //                 var zoom = map1.getZoom();
                //             }
                //             var lonList = JSON.parse(getStorage('lon'));
                //             if(zoom > 9){
                //                 $('#loadingTip').remove();
                //                 pointSimplifierIns.setData([]);
                //                 $('#loadingTip').remove();
                //                 startAnim()
                //                 var shiplist = JSON.parse(getStorage('cc'))
                //                 if(!iszhao) {
                //                     for (var i = 0; i < lonList.length; i++) {
                //                         marker = new AMap.Marker({
                //                             icon: "http://huizhaochuan.oss-cn-shanghai.aliyuncs.com/hzclogo8.png?x-oss-process=image/resize,p_70",
                //                             position: [lonList[i].split(',')[0], lonList[i].split(',')[1]],
                //                             extData:{content:shiplist[i].shipName+'&&'+shiplist[i].tonnage+'&&'+shiplist[i].hdg+'&&'+shiplist[i].shipState+'&&'+shiplist[i].dest+'&&'+shiplist[i].etaStd+'&&'+shiplist[i].lastTime+'&&'+shiplist[i].shipId},
                //                             title:shiplist[i].shipName
                //                         });
                //                         if(isflag1){
                //                             map.add(marker);
                //                         }else{
                //                             map1.add(marker);
                //                         }
                //
                //                         marker.setAngle(20+i)
                //                         marker.on('click', showInfoM);
                //                     }
                //                     iszhao = true;
                //                 }
                //             }else{
                //                 //    console.log(data)
                //                 //海量点的数据填充
                //                 pointSimplifierIns.setData(JSON.parse(getStorage('lon')));
                //                 $('#loadingTip').remove();
                //                 $('.amap-marker').css('display','none');
                //                 iszhao = false
                //
                //                 startAnim();
                //             }
                //
                //             $.ajax({
                //                 type: 'post',
                //                 url: "ship/queryShipByLat.do",
                //                 data: JSON.stringify({
                //                     "dunWei": "",
                //                     "chuFaDi": nort4.split(',')[0] + ',' + nort4.split(',')[1] + '-' + nort1.split(',')[0] + ',' + nort1.split(',')[1] + '-' + nort3.split(',')[0] + ',' + nort3.split(',')[1] + '-' + nort2.split(',')[0] + ',' + nort2.split(',')[1],
                //                     "isZY": ""
                //                 }),
                //                 success: function (data) {
                //                     if(!data.SUCCESS || data.shipList.length == 0){
                //                         swal({
                //                             title: "暂无船舶信息",
                //                             type: "warning"
                //                         });
                //                         return
                //                     }
                //                     var lnglats;
                //
                //                     for (var i = 0; i < data.shipList.length; i++) {
                //                         lonlat.push(data.shipList[i].lon + ',' + data.shipList[i].lat)
                //                         lonlatO.lonlat = data.shipList[i].lon + ',' + data.shipList[i].lat;
                //
                //                     }
                //                     if(!getStorage('cc')){
                //                         removeStorage('cc')
                //                     }
                //                     setStorage('cc',JSON.stringify(data.shipList))
                //                     if (getStorage('lon') == JSON.stringify(lonlat)) {
                //                     }else{
                //                         removeStorage('lon');
                //                         setStorage('lon', JSON.stringify(lonlat));
                //                         var lonList = JSON.parse(getStorage('lon'));
                //                         if(zoom > 9){
                //                             $('#loadingTip').remove();
                //                             pointSimplifierIns.setData([]);
                //                             $('#loadingTip').remove();
                //                             startAnim()
                //                             if(!iszhao) {
                //                                 for (var i = 0; i < lonList.length; i++) {
                //                                     marker = new AMap.Marker({
                //                                         icon: "http://huizhaochuan.oss-cn-shanghai.aliyuncs.com/hzclogo8.png?x-oss-process=image/resize,p_70",
                //                                         position: [lonList[i].split(',')[0], lonList[i].split(',')[1]],
                //                                         extData:{content:shiplist[i].shipName+'&&'+shiplist[i].tonnage+'&&'+shiplist[i].hdg+'&&'+shiplist[i].shipState+'&&'+shiplist[i].dest+'&&'+shiplist[i].etaStd+'&&'+shiplist[i].lastTime+'&&'+shiplist[i].shipId},
                //                                         angle:200,
                //                                         autoRotation:true,
                //                                         title:shiplist[i].shipName
                //                                     });
                //                                     if(isflag1){
                //                                         map.add(marker);
                //                                     }else{
                //                                         map1.add(marker);
                //                                     }
                //                                     marker.setAngle(20+i)
                //                                     // marker.set
                //                                     marker.on('click', showInfoM);
                //                                 }
                //                                 iszhao = true;
                //                             }
                //                         }else{
                //                             //    console.log(data)
                //                             //海量点的数据填充
                //                             pointSimplifierIns.setData(JSON.parse(getStorage('lon')));
                //                             $('#loadingTip').remove();
                //                             $('.amap-marker').css('display','none');
                //                             iszhao = false
                //                             startAnim();
                //                         }
                //                     }
                //
                //                 }
                //             })
                //         }else {
                //             $.ajax({
                //                 type: 'post',
                //                 url: "ship/queryShipByLat.do",
                //                 data: JSON.stringify({
                //                     "dunWei": "",
                //                     "chuFaDi": nort4.split(',')[0] + ',' + nort4.split(',')[1] + '-' + nort1.split(',')[0] + ',' + nort1.split(',')[1] + '-' + nort3.split(',')[0] + ',' + nort3.split(',')[1] + '-' + nort2.split(',')[0] + ',' + nort2.split(',')[1],
                //                     "isZY": ""
                //                 }),
                //                 success: function (data) {
                //                     if (!data.SUCCESS || data.shipList.length == 0) {
                //                         swal({
                //                             title: "暂无船舶信息",
                //
                //                             type: "warning"
                //                         });
                //                         return
                //                     }
                //                     if (data.SUCCESS) {
                //                         for (var i = 0; i < data.shipList.length; i++) {
                //                             lonlat.push(data.shipList[i].lon + ',' + data.shipList[i].lat)
                //                             if(isflag1){
                //                                 var zoom = map.getZoom();
                //                             }else{
                //                                 var zoom = map1.getZoom();
                //                             }
                //                             var marker = new AMap.Marker({
                //                                 icon: "http://huizhaochuan.oss-cn-shanghai.aliyuncs.com/hzclogo8.png?x-oss-process=image/resize,p_70",
                //                                 position: [data.shipList[i].lon,data.shipList[i].lat],
                //                                 extData: {content: data.shipList[i].shipName + '&&' + data.shipList[i].tonnage + '&&' + data.shipList[i].hdg + '&&' + data.shipList[i].shipState + '&&' + data.shipList[i].dest + '&&' + data.shipList[i].etaStd + '&&' + data.shipList[i].lastTime + '&&' + data.shipList[i].shipId},
                //                                 title:data.shipList[i].shipName
                //                             });
                //                             //判断地图等级
                //                             if (zoom > 9) {
                //                                 if(isflag1){
                //                                     map.add(marker);
                //                                 }else{
                //                                     map1.add(marker);
                //                                 }
                //                                 marker.setAngle(20 + i)
                //                                 marker.on('click', showInfoM);
                //
                //                                 // map.remove(marker)
                //                             } else {
                //                                 map.remove(marker)
                //                             }
                //                         }
                //                         if (!getStorage('cc')) {
                //                             removeStorage('cc')
                //                         }
                //                         setStorage('cc', JSON.stringify(data.shipList))
                //                         console.log(lonlat)
                //                         setStorage('lon', JSON.stringify(lonlat))
                //                         if (zoom > 9) {
                //                             $('#loadingTip').remove();
                //                             pointSimplifierIns.setData([]);
                //                             $('#loadingTip').remove();
                //                             startAnim()
                //                         } else {
                //                             //    console.log(data)
                //                             //海量点的数据填充
                //                             pointSimplifierIns.setData(lonlat);
                //                             $('#loadingTip').remove();
                //                             startAnim();
                //                         }
                //
                //                     }
                //                 }
                //             })
                //         }
                //
                //     }
                //
                //     //监听地图的拖拽和缩放事件
                //     if(isflag1){
                //         map.on('moveend',csvTop);
                //         map.on('zoomend', csvTop);
                //     }else{
                //         map1.on('moveend',csvTop);
                //         map1.on('zoomend', csvTop);
                //     }
                //
                // });
            }
        }
        map.plugin(["AMap.Scale"],function(){
            var scale = new AMap.Scale();
            map.addControl(scale);
        });

        AMapUI.load(['ui/misc/PointSimplifier', 'lib/$'], function(PointSimplifier, $) {
            if (!PointSimplifier.supportCanvas) {
                alert('当前环境不支持 Canvas！');
                return;
            }
            if(isflag1){
                var pointSimplifierIns = new PointSimplifier({
                    zIndex: 115,
                    autoSetFitView: false,
                    map: map, //所属的地图实例

                    getPosition: function(item) {
                        if (!item) {
                            return null;
                        }
                        var parts = item.split(',');
                        return [parseFloat(parts[0]), parseFloat(parts[1])];
                    },
                    getHoverTitle: function(dataItem, idx) {
                        return ;
                    },
                    //使用GroupStyleRender
                    renderConstructor: PointSimplifier.Render.Canvas.GroupStyleRender,
                    renderOptions: {
                        //点的样式
                        pointStyle: {
                            fillStyle: 'red',
                            width: 5,
                            height: 5
                        },
                        getGroupId: function(item, idx) {
                            var parts = item.split(',');
                            //按纬度区间分组
                            return Math.abs(Math.round(parseFloat(parts[1]) / 3));
                        },
                        groupStyleOptions: function(gid) {
                            return {
                                pointStyle: {
                                    fillStyle: colors[gid % colors.length]
                                }
                            };
                        }

                    }
                });
            }else{
                var pointSimplifierIns = new PointSimplifier({
                    zIndex: 115,
                    autoSetFitView: false,
                    map: map1, //所属的地图实例

                    getPosition: function(item) {
                        if (!item) {
                            return null;
                        }
                        var parts = item.split(',');
                        return [parseFloat(parts[0]), parseFloat(parts[1])];
                    },
                    getHoverTitle: function(dataItem, idx) {
                        return ;
                    },
                    //使用GroupStyleRender
                    renderConstructor: PointSimplifier.Render.Canvas.GroupStyleRender,
                    renderOptions: {
                        //点的样式
                        pointStyle: {
                            fillStyle: 'red',
                            width: 5,
                            height: 5
                        },
                        getGroupId: function(item, idx) {
                            var parts = item.split(',');
                            //按纬度区间分组
                            return Math.abs(Math.round(parseFloat(parts[1]) / 3));
                        },
                        groupStyleOptions: function(gid) {
                            return {
                                pointStyle: {
                                    fillStyle: colors[gid % colors.length]
                                }
                            };
                        }

                    }
                });
            }

            function startAnim() {
                var renderOptions = pointSimplifierIns.getRenderOptions();
                //获得pointStyle
                var pointStyle = renderOptions.pointStyle;
                var size = pointStyle.width,
                    range = [1, 9],
                    step = size < range[1] ? 1 : -1;
                //pointSimplifierIns.getRender().getLayer().set('alwaysRender', true);
                function anim() {
                    size += step;
                    //修改pointStyle
                    pointStyle.width = pointStyle.height = size;
                    //重新绘制
                    pointSimplifierIns.render();
                    if (size >= range[1]) {
                        step = -1;
                    } else if (size <= range[0]) {
                        step = 1;
                    }
                    //window.requestAnimationFrame(anim);
                    //
                    setTimeout(anim, 3000);
                }
                anim();
            }
            function showInfoM(e) {
                // console.log(e)//content: "鲁济宁货6372"
                document.getElementById('zhao-curr').style.display = 'none'
                var html = '';
                var id = e.target.Ke.extData.content.split('&&')[7]
                html+='<div style="margin-left: 20px;color:#00a0f0;padding-top: 10px;padding-bottom: 10px;">'
                    +' <span >船舶档案</span><span onclick="closes()" style="margin-left: 200px;font-size: 12px; cursor: pointer;">X</span>'
                    +'</div>'
                    +'<div style="margin-left: 20px">\n' +
                    ' <div style="padding-top: 15px;">船名：'+e.target.Ke.extData.content.split('&&')[0]+'</div>\n' +
                    ' <div style="padding-top: 15px;">电话：<span id="phonesq"  style="padding: 5px; color: #000000;display: none"></span> <span style="padding: 5px;cursor: pointer; background-color: #0e9aef;color: #ffffff;" id="phones" onclick="phoneList(1,'+id+')">立即联系</span>\n' +
                    '<div style="padding-top: 15px;">载货量：'+e.target.Ke.extData.content.split('&&')[1]+'</div>\n' +
                    '</div>\n' +
                    '<div style="margin-left: 0px">\n' +
                    '<div style="padding-top: 15px;">航迹向：'+e.target.Ke.extData.content.split('&&')[2]+'</div>\n' +
                    '<div style="padding-top: 15px;">航行状态：'+e.target.Ke.extData.content.split('&&')[3]+'</div>\n' +
                    '<div style="padding-top: 15px;">目的地：'+e.target.Ke.extData.content.split('&&')[4]+'</div>\n' +
                    '<div style="padding-top: 15px;">预计到港时间：'+e.target.Ke.extData.content.split('&&')[5]+'</div>\n' +
                    '<div style="padding-top: 15px;">数据更新时间：'+e.target.Ke.extData.content.split('&&')[6]+'</div>\n' +
                    '</div>'
                document.getElementById('zhaoc').style.display = 'block'
                document.getElementById('zhao-center').style.display = 'none'
                document.getElementById('zhaoc').style.marginTop =  '16px';

                $('#zhaoc').html(html)
                if(!isFlag){
                    phoneList(1,id)
                }
            }
            function csvTop(){
                if(isflag1){
                    var bounds = map.getBounds();
                    nort1 =  bounds.northeast.toString();    //东北
                    nort2 =  bounds.southwest.toString();    //西南
                    nort3 = bounds.northeast.toString().split(',')[0]+','+ bounds.southwest.toString().split(',')[1]  ;    //东南
                    nort4 =  bounds.southwest.toString().split(',')[0]  +','+ bounds.northeast.toString().split(',')[1];    //西北
                }else{
                    var bounds = map1.getBounds();
                    nort1 =  bounds.northeast.toString();    //东北
                    nort2 =  bounds.southwest.toString();    //西南
                    nort3 = bounds.northeast.toString().split(',')[0]+','+ bounds.southwest.toString().split(',')[1]  ;    //东南
                    nort4 =  bounds.southwest.toString().split(',')[0]  +','+ bounds.northeast.toString().split(',')[1];    //西北
                }
                var lonlat = [];
                var lonlatO = {}
                var marker = '';
                var lonlatA = [];
                $('<div id="loadingTip">加载数据，请稍候...</div>').appendTo(document.body);
                // console.log(JSON.parse(getStorage('lon')))
                if(JSON.parse(getStorage('lon'))){
                    // console.log(1)
                    if(isflag1){
                        var zoom = map.getZoom();
                    }else{
                        var zoom = map1.getZoom();
                    }
                    var lonList = JSON.parse(getStorage('lon'));
                    if(zoom > 9){
                        $('#loadingTip').remove();
                        pointSimplifierIns.setData([]);
                        $('#loadingTip').remove();
                        startAnim()
                        var shiplist = JSON.parse(getStorage('cc'))
                        if(!iszhao) {
                            $('.amap-marker').css('display','none');
                            for (var i = 0; i < lonList.length; i++) {
                                marker = new AMap.Marker({
                                    icon: "http://huizhaochuan.oss-cn-shanghai.aliyuncs.com/hzclogo8.png?x-oss-process=image/resize,p_70",
                                    position: [lonList[i].split(',')[0], lonList[i].split(',')[1]],
                                    extData:{content:shiplist[i].shipName+'&&'+shiplist[i].tonnage+'&&'+shiplist[i].hdg+'&&'+shiplist[i].shipState+'&&'+shiplist[i].dest+'&&'+shiplist[i].etaStd+'&&'+shiplist[i].lastTime+'&&'+shiplist[i].shipId},
                                    title:shiplist[i].shipName
                                });
                                if(isflag1){
                                    map.add(marker);
                                }else{
                                    map1.add(marker);
                                }

                                marker.setAngle(20+i)
                                marker.on('click', showInfoM);
                            }
                            iszhao = true;
                        }
                    }else{
                        //    console.log(data)
                        //海量点的数据填充
                        pointSimplifierIns.setData(JSON.parse(getStorage('lon')));
                        $('#loadingTip').remove();
                        $('.amap-marker').css('display','none');
                        iszhao = false

                        startAnim();
                    }

                    $.ajax({
                        type: 'post',
                        url: "ship/queryShipByLat.do",
                        data: JSON.stringify({
                            "dunWei": "",
                            "chuFaDi": nort4.split(',')[0] + ',' + nort4.split(',')[1] + '-' + nort1.split(',')[0] + ',' + nort1.split(',')[1] + '-' + nort3.split(',')[0] + ',' + nort3.split(',')[1] + '-' + nort2.split(',')[0] + ',' + nort2.split(',')[1],
                            "isZY": ""
                        }),
                        success: function (data) {
                            if(!data.SUCCESS || data.shipList.length == 0){
                                swal({
                                    title: "暂无船舶信息",
                                    type: "warning"
                                });
                                return
                            }
                            var lnglats;

                            for (var i = 0; i < data.shipList.length; i++) {
                                lonlat.push(data.shipList[i].lon + ',' + data.shipList[i].lat)
                                lonlatO.lonlat = data.shipList[i].lon + ',' + data.shipList[i].lat;

                            }
                            if(!getStorage('cc')){
                                removeStorage('cc')
                            }
                            setStorage('cc',JSON.stringify(data.shipList))
                            if (getStorage('lon') == JSON.stringify(lonlat)) {
                            }else{
                                removeStorage('lon');
                                setStorage('lon', JSON.stringify(lonlat));
                                var lonList = JSON.parse(getStorage('lon'));
                                if(zoom > 9){
                                    $('#loadingTip').remove();
                                    pointSimplifierIns.setData([]);
                                    $('#loadingTip').remove();
                                    startAnim()
                                    if(!iszhao) {
                                        $('.amap-marker').css('display','none');
                                        for (var i = 0; i < lonList.length; i++) {
                                            marker = new AMap.Marker({
                                                icon: "http://huizhaochuan.oss-cn-shanghai.aliyuncs.com/hzclogo8.png?x-oss-process=image/resize,p_70",
                                                position: [lonList[i].split(',')[0], lonList[i].split(',')[1]],
                                                extData:{content:shiplist[i].shipName+'&&'+shiplist[i].tonnage+'&&'+shiplist[i].hdg+'&&'+shiplist[i].shipState+'&&'+shiplist[i].dest+'&&'+shiplist[i].etaStd+'&&'+shiplist[i].lastTime+'&&'+shiplist[i].shipId},
                                                angle:200,
                                                autoRotation:true,
                                                title:shiplist[i].shipName
                                            });
                                            if(isflag1){
                                                map.add(marker);
                                            }else{
                                                map1.add(marker);
                                            }
                                            marker.setAngle(20+i)
                                            // marker.set
                                            marker.on('click', showInfoM);
                                        }
                                        iszhao = true;
                                    }
                                }else{
                                    //    console.log(data)
                                    //海量点的数据填充
                                    pointSimplifierIns.setData(JSON.parse(getStorage('lon')));
                                    $('#loadingTip').remove();
                                    $('.amap-marker').css('display','none');
                                    iszhao = false
                                    startAnim();
                                }
                            }

                        }
                    })
                }else {
                    $.ajax({
                        type: 'post',
                        url: "ship/queryShipByLat.do",
                        data: JSON.stringify({
                            "dunWei": "",
                            "chuFaDi": nort4.split(',')[0] + ',' + nort4.split(',')[1] + '-' + nort1.split(',')[0] + ',' + nort1.split(',')[1] + '-' + nort3.split(',')[0] + ',' + nort3.split(',')[1] + '-' + nort2.split(',')[0] + ',' + nort2.split(',')[1],
                            "isZY": ""
                        }),
                        success: function (data) {
                            if (!data.SUCCESS || data.shipList.length == 0) {
                                swal({
                                    title: "暂无船舶信息",

                                    type: "warning"
                                });
                                return
                            }
                            if (data.SUCCESS) {
                                for (var i = 0; i < data.shipList.length; i++) {
                                    lonlat.push(data.shipList[i].lon + ',' + data.shipList[i].lat)
                                    if(isflag1){
                                        var zoom = map.getZoom();
                                    }else{
                                        var zoom = map1.getZoom();
                                    }
                                    var marker = new AMap.Marker({
                                        icon: "http://huizhaochuan.oss-cn-shanghai.aliyuncs.com/hzclogo8.png?x-oss-process=image/resize,p_70",
                                        position: [data.shipList[i].lon,data.shipList[i].lat],
                                        extData: {content: data.shipList[i].shipName + '&&' + data.shipList[i].tonnage + '&&' + data.shipList[i].hdg + '&&' + data.shipList[i].shipState + '&&' + data.shipList[i].dest + '&&' + data.shipList[i].etaStd + '&&' + data.shipList[i].lastTime + '&&' + data.shipList[i].shipId},
                                        title:data.shipList[i].shipName
                                    });
                                    //判断地图等级
                                    if (zoom > 9) {
                                        if(isflag1){
                                            map.add(marker);
                                        }else{
                                            map1.add(marker);
                                        }
                                        marker.setAngle(20 + i)
                                        marker.on('click', showInfoM);

                                        // map.remove(marker)
                                    } else {
                                        map.remove(marker)
                                    }
                                }
                                if (!getStorage('cc')) {
                                    removeStorage('cc')
                                }
                                setStorage('cc', JSON.stringify(data.shipList))
                                // console.log(lonlat)
                                setStorage('lon', JSON.stringify(lonlat))
                                if (zoom > 9) {
                                    $('#loadingTip').remove();
                                    pointSimplifierIns.setData([]);
                                    $('#loadingTip').remove();
                                    startAnim()
                                } else {
                                    //    console.log(data)
                                    //海量点的数据填充
                                    pointSimplifierIns.setData(lonlat);
                                    $('#loadingTip').remove();
                                    startAnim();
                                }

                            }
                        }
                    })
                }

            }
            csvTop();
            //监听地图的拖拽和缩放事件
            if(isflag1){
                map.on('moveend',csvTop);
                map.on('zoomend', csvTop);
            }else{
                map1.on('moveend',csvTop);
                map1.on('zoomend', csvTop);
            }

        });
    }


    function setStorage(key,val){
        return window.localStorage.setItem(key,val)
    }
    function getStorage(key){
        return window.localStorage.getItem(key)
    }

    function removeStorage(key){
        return window.localStorage.removeItem(key)
    }
    function phoneList(index,shipId){
        var indexs = index;
        var shioId = shipId;
        var shipList1 =  {'shipId':shioId}
        var data = {
            shipList:[shipList1],
            consumeTypeId:1
        }
        $.ajax({
            type:'post',
            url:"deductions/generatingOrder.do",
            data:JSON.stringify(data),
            success:function(res){

                if(res.SUCCESS){
                    // var confirmsh = confirm("本次操作需要"+res.totalMoney+"元");
                    if(!isFlag){
                        $.ajax({
                            type: 'post',
                            url: "feedback/selectShipFeedbackByPhone.do",
                            data: JSON.stringify({
                                consumeId: res.consumeId,
                                shipList: [shipList1]
                            }),
                            success: function (data1) {
                                if (data1.SUCCESS) {
                                    for (var i = 0; i < data1.shipInfoDtos.length; i++) {
                                        if (indexs == 2) {
                                            document.getElementById('phones2').style.display = 'none';

                                        } else {
                                            document.getElementById('phones').style.display = 'none';
                                            document.getElementById('phonesq').style.display = '';
                                            document.getElementById('phonesq').innerHTML = data1.shipInfoDtos[0].phoneNum;

                                        }
                                    }
                                }
                            }
                        })

                    }else{
                        swal({
                            title: "本次操作需要"+res.totalMoney+"元",
                            type: "warning",
                            showCancelButton: true,
                            confirmButtonColor: "#DD6B55",
                            confirmButtonText: "确定",
                            closeOnConfirm: true
                        }, function () {

                            // if(confirmsh) {
                            $.ajax({
                                type: 'post',
                                url: "feedback/selectShipFeedbackByPhone.do",
                                data: JSON.stringify({
                                    consumeId: res.consumeId,
                                    shipList: [shipList1]
                                }),
                                success: function (data1) {
                                    if (data1.SUCCESS) {
                                        for (var i = 0; i < data1.shipInfoDtos.length; i++) {
                                            if (indexs == 2) {
                                                document.getElementById('phones2').style.display = 'none';

                                            } else {
                                                document.getElementById('phones').style.display = 'none';
                                                document.getElementById('phonesq').style.display = '';
                                                document.getElementById('phonesq').innerHTML = data1.shipInfoDtos[0].phoneNum;

                                            }
                                        }
                                    }
                                }
                            })
                        });
                    }
                }else{


                    if(!isFlag){
                        $.ajax({
                            type: 'post',
                            url: "feedback/selectShipFeedbackByPhone.do",
                            data: JSON.stringify({
                                consumeId: res.consumeId,
                                shipList: [shipList1]
                            }),
                            success: function (data1) {
                                if (data1.SUCCESS) {
                                    for (var i = 0; i < data1.shipInfoDtos.length; i++) {
                                        if (indexs == 2) {
                                            document.getElementById('phones2').style.display = 'none';

                                        } else {
                                            document.getElementById('phones').style.display = 'none';
                                            document.getElementById('phonesq').style.display = '';
                                            document.getElementById('phonesq').innerHTML = data1.shipInfoDtos[0].phoneNum;

                                        }
                                    }
                                }
                            }
                        })

                    }else {

                        swal({
                            title: "余额不足请去充值！！！",
                            type: "warning",
                            showCancelButton: true,
                            confirmButtonColor: "#DD6B55",
                            confirmButtonText: "确定",
                            closeOnConfirm: true
                        }, function () {
                            window.location.href = "toRecharge.do";
                        })
                    }
                    //  var confirmsh1 = confirm("余额不足请去充值！！！");
                    // if(confirmsh1){
                    //     window.location.href = "toRecharge.do"
                    // }

                }
            }})
    }
    function adjective(){
        isFlag = true
        isflag1 = true;
        document.getElementById('zhao-curr').style.display = 'none'
        document.getElementById('c1').style.border = '1px #0e9aef solid'
        document.getElementById('c1').style.color = '#0e9aef'
        document.getElementById('c2').style.border = '0px #000 solid'
        document.getElementById('c2').style.color = '#000'

        document.getElementById('zhaochuangs').value = '';
        document.getElementById('dunwei1').value = '';
        document.getElementById('dunwei2').value = '';
        document.getElementById('zhao-curr').style.display = 'none'
        document.getElementById('a1').style.display = 'block';
        document.getElementById('a2').style.display = 'none';
        document.getElementById('zhaoc').style.display = 'none'
        document.getElementById('zhao-center').style.display = 'none'
        document.getElementById('zhao11').style.backgroundColor = '#0e9aef'
        document.getElementById('zhao12').style.backgroundColor = '#ffffff'
        document.getElementById('zhao11').style.color = '#ffffff'
        document.getElementById('zhao12').style.color = '#000000'
        init();
    }
    function idiom(isLog){
        isFlag = false
        isFlag1 = true;
        document.getElementById('zhao-curr').style.display = 'none'
        document.getElementById('c2').style.border = '1px #0e9aef solid'
        document.getElementById('c2').style.color = '#0e9aef'
        document.getElementById('c1').style.border = '0px #000 solid'
        document.getElementById('c1').style.color = '#000'

        document.getElementById('zhaochuangs').value = '';
        document.getElementById('dunwei1').value = '';
        document.getElementById('dunwei2').value = '';
        document.getElementById('zhao-curr').style.display = 'none'
        document.getElementById('a1').style.display = 'block';
        document.getElementById('a2').style.display = 'none';
        document.getElementById('zhaoc').style.display = 'none'
        document.getElementById('zhao-center').style.display = 'none'
        document.getElementById('zhao11').style.backgroundColor = '#0e9aef'
        document.getElementById('zhao12').style.backgroundColor = '#ffffff'
        document.getElementById('zhao11').style.color = '#ffffff'
        document.getElementById('zhao12').style.color = '#000000'
        var map = new AMap.Map('mapContainer', {
            resizeEnable: true,
            zoom: ww == 1 ? 4 :10,
            showIndoorMap: false,
            features: ['bg','point']
        });
        var autoOptions = {
            input: "zhaochuangs"
        };
        var auto = new AMap.Autocomplete(autoOptions);
        var placeSearch = new AMap.PlaceSearch({
            map: map
        });  //构造地点查询类
        AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发

        function select(e) {
            map1 = new AMap.Map('mapContainer', {
                resizeEnable: true,
                zoom: 9,
                showIndoorMap: false,
                features: ['bg','point']
            });
            var autoOptions = {
                input: "zhaochuangs"
            };
            auto = new AMap.Autocomplete(autoOptions);
            placeSearch = new AMap.PlaceSearch({
                map: map1
            });
            AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发

            placeSearch.setCity(e.poi.adcode);
            placeSearch.search(e.poi.name);  //关键字查询查询
            setTimeout(zhaoChuang1,2000);

        }
        $.ajax({
            type:'post',
            url:"ship/queryShipByLat.do",
            data:JSON.stringify({
                "dunWei":"",
                "chuFaDi":nort4.split(',')[0]+','+nort4.split(',')[1]+'-'+nort1.split(',')[0]+','+nort1.split(',')[1]+'-'+nort3.split(',')[0]+','+nort3.split(',')[1]+'-'+nort2.split(',')[0]+','+nort2.split(',')[1],
                "isZY":"Y"
            }),
            success:function(data){
                var lnglats;
                lonlat=[];
                if(isLog){
                    return;
                }
                if(!data.SUCCESS || data.shipList.length == 0){
                    swal({
                        title: "暂无船舶信息",
                        type: "success"
                    });
                    return
                }
                for(var i =0;i<data.shipList.length; i++){
                    lonlat.push(data.shipList[i].lon+','+data.shipList[i].lat)
                    var gps = [data.shipList[i].lon,data.shipList[i].lat];
                    AMap.convertFrom(gps, 'gps', function (status, result) {
                        if (result.info === 'ok') {
                            lnglats  = result.locations; // Array.<LngLat>
                            // console.log(lnglats)
                        }
                    });
                    var zoom = map.getZoom()

                    var marker = new AMap.Marker({
                        icon: "http://huizhaochuan.oss-cn-shanghai.aliyuncs.com/hzclogo8.png?x-oss-process=image/resize,p_70",
                        position: [data.shipList[i].lon, data.shipList[i].lat],
                        extData:{content:data.shipList[i].shipName+'&&'+data.shipList[i].tonnage+'&&'+data.shipList[i].hdg+'&&'+data.shipList[i].shipState+'&&'+data.shipList[i].dest+'&&'+data.shipList[i].etaStd+'&&'+data.shipList[i].lastTime+'&&'+data.shipList[i].shipId},
                        title:data.shipList[i].shipName
                    });


                    //判断地图等级
                    map.add(marker);
                    marker.setAngle(20+i)
                    marker.on('click', showInfoM1);
                    // map.remove(marker)
                }
                // console.log(lonlat)
            }})
    }


    function zhaoChuang(shipName1){
        //输入提示
        //船名找船
        isflag1=true;
        document.getElementById('zhao-curr').style.display = 'none'
        var shipName;
        if(!shipName1) {
            shipName = document.getElementById('zhaochuang').value;
        }else{
            shipName = shipName1
        }
        $.ajax({
            type:'post',
            url:"ship/queryShipByName.do",
            data:JSON.stringify({
                "shipName":shipName,
            }),
            success:function(data) {
                if (!data.SUCCESS || data.shipList.length == 0) {
                    swal({
                        title: "暂无船舶信息",
                        type: "success"
                    });
                    return;
                }
                if (data.SUCCESS) {
                    if (!data.shipList[0].lon || !data.shipList[0].lon) {
                        map1 = new AMap.Map('mapContainer', {
                            resizeEnable: true,
                            zoom: 10,
                            showIndoorMap: false,
                            features: ['bg', 'point']
                        });
                        swal({
                            title: "船舶信息异常，请联系客服",
                            type: "success"
                        });
                        return
                    } else {
                        map1 = new AMap.Map('mapContainer', {
                            resizeEnable: true,
                            zoom: 10,
                            center: [data.shipList[0].lon, data.shipList[0].lat],
                            showIndoorMap: false,
                            features: ['bg', 'point']
                        });
                    }
                    document.getElementById('zhaoc').style.display = 'block'
                    document.getElementById('zhao-center').style.display = 'none'
                } else {
                    swal({
                        title: "暂无船舶信息",
                        type: "warning"
                    });
                }
                var html = '';
                for (var i = 0; i < data.shipList.length; i++) {
                    shipId = data.shipList[0].shipId;

                    html += '<div style="margin-left: 20px;color:#00a0f0;padding-top: 10px;padding-bottom: 10px;">'
                        + ' <span >船舶档案</span><span onclick="closes()" style="margin-left: 200px;font-size: 12px; cursor: pointer;">X</span>'
                        + '</div>'
                        + '<div style="margin-left: 20px">\n' +
                        ' <div style="padding-top: 15px;">船名：' + data.shipList[i].shipName + '</div>\n' +
                        ' <div style="padding-top: 15px;">电话：<span id="phonesq"  style="padding: 5px; color: #000000;display: none"></span><span style="padding: 5px; background-color: #0e9aef;cursor: pointer;color: #ffffff;" id="phones" onclick="phoneList(1,' + data.shipList[i].shipId + ')">立即联系</span>\n' +
                        '<div style="padding-top: 15px;">载货量：' + data.shipList[i].tonnage + '</div>\n' +
                        '</div>\n' +
                        '<div style="margin-left: 0px">\n' +
                        '<div style="padding-top: 15px;">经度：' + data.shipList[i].lon + '</div>\n' +
                        '<div style="padding-top: 15px;">纬度：' + data.shipList[i].lat + '</div>\n' +
                        '<div style="padding-top: 15px;">航迹向：' + data.shipList[i].hdg + '</div>\n' +
                        '<div style="padding-top: 15px;">航行状态：' + data.shipList[i].shipState + '</div>\n' +
                        '<div style="padding-top: 15px;">目的地：' + data.shipList[i].dest + '</div>\n' +
                        '<div style="padding-top: 15px;">预计到港时间：' + data.shipList[i].etaStd + '</div>\n' +
                        '<div style="padding-top: 15px;">数据更新时间：' + data.shipList[i].lastTime + '</div>\n' +
                        '</div>'
                    var markers = new AMap.Marker({
                        icon: "http://huizhaochuan.oss-cn-shanghai.aliyuncs.com/hzclogo8.png?x-oss-process=image/resize,p_70",
                        position: [data.shipList[i].lon, data.shipList[i].lat]
                    });
                    map1.add(markers);

                }
                document.getElementById('zhaoc').style.marginTop = '16px';


                $('#zhaoc').html(html)
                if(!isFlag){
                    phoneList(1,data.shipList[0].shipId )
                }
            }
        })
    }
    function closes(){
        document.getElementById('zhaochuangs').value = '';
        document.getElementById('dunwei1').value = '';
        document.getElementById('dunwei2').value = '';
        document.getElementById('zhaoc').style.display = 'none'
        document.getElementById('zhao-center').style.display = 'none'
        if(isFlag){
            idiom(true);
            adjective();
        }else{
            idiom();
        }

        // var bounds = map.getBounds();
        // nort1 =  bounds.northeast.toString();    //东北
        // nort2 =  bounds.southwest.toString();    //西南
        // nort3 =  bounds.southwest.toString().split(',')[1] +','+ bounds.northeast.toString().split(',')[0];    //东南
        // nort4 =  bounds.northeast.toString().split(',')[1] +','+ bounds.southwest.toString().split(',')[0];    //西北
        // var d1 = document.getElementById('dunwei1').value
        // var d2 = document.getElementById('dunwei2').value
        // var chuFaDi = nort4.split(',')[0]+','+nort4.split(',')[1]+'-'+nort1.split(',')[0]+','+nort1.split(',')[1]+'-'+nort3.split(',')[0]+','+nort3.split(',')[1]+'-'+nort2.split(',')[0]+','+nort2.split(',')[1]
        // if(d1 && d2){
        //     var d3 = d1+"-"+d2
        //     chuFaDi = '';
        //
        // }
        // map1 = new AMap.Map('mapContainer', {
        //     resizeEnable: true,
        //     zoom: 10,
        //     showIndoorMap: false,
        //     features: ['bg','point']
        // });
        // if(isFlag){
        //     var isZY = ''
        // }else {
        //     var isZY = 'Y'
        // }
        // $.ajax({
        //     type:'post',
        //     url:"ship/queryShipByLat.do",
        //     data:JSON.stringify({
        //         "dunWei":d3,
        //         'chuFaDi' : chuFaDi,
        //         "isZY":isZY
        //     }),
        //     success:function(data){
        //
        //         if(!data.SUCCESS || data.shipList.length == 0){
        //             alert("该区域无船舶信息！")
        //             return
        //         }else{
        //         }
        //         var lnglats;
        //         for(var i =0;i<data.shipList.length; i++){
        //             var zoom = map.getZoom()
        //             marker = new AMap.Marker({
        //                 icon: "http://huizhaochuan.oss-cn-shanghai.aliyuncs.com/hzclogo8.png?x-oss-process=image/resize,p_70",
        //                 position: [data.shipList[i].lon,data.shipList[i].lat],
        //                 extData:{content:data.shipList[i].shipName+','+data.shipList[i].tonnage+','+data.shipList[i].hdg+','+data.shipList[i].shipState+','+data.shipList[i].dest+','+data.shipList[i].etaStd+','+data.shipList[i].lastTime+','+data.shipList[i].shipId},
        //                 title:data.shipList[i].shipName
        //             });
        //             // map.add(marker);
        //             marker.setAngle(20+i)
        //             marker.on('click', showInfoM1);
        //             //判断地图等级
        //              map1.add(marker);
        //             // map.remove(marker)
        //
        //         }
        //
        //     }})
    }
    function closes1() {
        document.getElementById('zhaochuangs').value = '';
        document.getElementById('dunwei1').value = '';
        document.getElementById('dunwei2').value = '';
        document.getElementById('zhaoc').style.display = 'none'
        document.getElementById('zhao-center').style.display = 'none'
        document.getElementById('a2').style.display = 'block';
        document.getElementById('a1').style.display = 'none';
        document.getElementById('zhaoc').style.display = 'none'
        document.getElementById('zhao-center').style.display = 'none'
        document.getElementById('zhao11').style.backgroundColor = '#ffffff'
        document.getElementById('zhao12').style.backgroundColor = '#0e9aef'
        document.getElementById('zhao12').style.color = '#ffffff'
        document.getElementById('zhao11').style.color = '#000000'
        if (isFlag) {
            idiom(true);
            adjective();
        } else {
            idiom();
        }
    }
</script>
</body>
</html>

